<!--
@description: 第一章
@author: ldb
@time: 2022-10-21 11:50:43
-->
<template></template>

<script lang="ts" setup>
import * as THREE from 'three'
// init
const camera = new THREE.PerspectiveCamera(88, window.innerWidth / window.innerHeight, 0.01, 10)
camera.position.z = 1
// 场景
const scene = new THREE.Scene()
// 相机
const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2)
const material = new THREE.MeshNormalMaterial()
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)
// 渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setAnimationLoop(animation)
document.getElementById('app').appendChild(renderer.domElement)
// animation
function animation(time) {
  mesh.rotation.x = time / 2000
  mesh.rotation.y = time / 1000
  renderer.render(scene, camera)
}
</script>

<style scoped lang="scss"></style>
